<template>
  <el-form-item
    :label="label"
    :label-width="labelWidth"
    :prop="props.data.field"
    :required="props.data.required"
    :rules="props.data.rules"
  >
    <el-input
      v-model="val"
      :style="{ width: `${props.data.compWidth || 100}%` }"
      clearable
      :placeholder="props.data.placeholder"
      :maxlength="props.data.length"
      :readonly="props.data.readonly"
      :disabled="props.data.disabled"
      :prefix-icon="getIcon(props.data.prefixIcon)"
      :suffix-icon="getIcon(props.data.suffixIcon)"
    >
      <template v-if="props.data.prefix" #prepend>{{ props.data.prefix }}</template>
      <template v-if="props.data.suffix" #append>{{ props.data.suffix }}</template>
    </el-input>
  </el-form-item>
</template>

<script setup lang="ts">
import { ElFormItem, ElInput } from 'element-plus'
import { useElIcon } from '@/hooks/icon'
import { useProps, useValue } from '../../common-props/hooks'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const emits = defineEmits(['valueChange'])

const { label, labelWidth } = useProps(props)
const { val } = useValue(props, emits)
const { getIcon } = useElIcon()
</script>

<style lang="scss" scoped></style>
